<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link href="css/style.css" rel="stylesheet" type="text/css">
</head>

<body>

    <div>请进行人机验证，按生成以获取验证码</div>
    <div>如果加载太久，请刷新重试，请勿打开多个登录窗口</div>

    <div id="btn-gen" class="btn">生成</div>
    <br><br>

    <div>
        <div id="captcha">
            <div id="text">
                请先生成
            </div>
            <div id="wait" class="show">
                <div class="loading">
                    <div class="loading-dot"></div>
                    <div class="loading-dot"></div>
                    <div class="loading-dot"></div>
                    <div class="loading-dot"></div>
                </div>
            </div>
        </div>
    </div>
    <br>

    <div>通过人机验证后，点击完成以登录</div>

    <div id="btn-result" class="btn">完成</div>

    <script src="js/jquery.min.js"></script>
    <script src="js/gt.js"></script>

    <script>
        var handler = function (captchaObj)
        {
            captchaObj.appendTo('#captcha');
            captchaObj.onReady(function ()
            {
                $("#wait").hide();
            });
            $('#btn-result').click(function ()
            {
                var result = captchaObj.getValidate();
                if (!result)
                {
                    return alert('请完成验证');
                }
                // alert(result.geetest_validate);
                // alert(result.geetest_seccode);
                window.external.notify(result.geetest_validate + '&' + result.geetest_seccode);
            });
        };

        $('#btn-gen').click(function ()
        {
            $('#text').hide();
            $('#wait').show();
            var args = getQueryArgs();
            var gt = args['gt'];
            var challenge = args['challenge'];
            initGeetest({
                gt: gt,
                challenge: challenge,
                offline: false, 
                new_captcha: true, 

                product: "popup", 
                width: "300px",
                https: true
            }, handler);
        });

        function getQueryArgs()
        {
            var qs = (location.search.length > 0 ? location.search.substr(1) : ''),
                args = {},
                items = qs.length ? qs.split('&') : [],
                item = null,
                name = null,
                value = null,
                i = 0,
                len = items.length;

            for (i = 0; i < len; i++)
            {
                item = items[i].split('='),
                    name = decodeURIComponent(item[0])
                value = decodeURIComponent(item[1])
                if (name.length)
                {
                    args[name] = value;
                }
            }
            return args;
        }
    </script>
</body>

</html>